import React from 'react';
import { Menu, Icon, Dropdown } from 'antd';

import styled from 'styled-components'

import iOSQRCode from '@/assets/images/iOS.png';
import AndroidQRCode from '@/assets/images/android.png';

import styles from './index.less'

export const QRCode = styled.img`
  margin: 30px 30px 0px 30px;
  width: 80px;
  height: 80px;
`

export const CodeSpan = styled.span`
  display: 'block'; 
  text-align: 'center'; 
  padding: 15;
`

export const CodeContainer = styled.div`
  display: inline-block;
`

const Item  = styled.span`
  color: #000;
  font-size: 16px;
  position: absolute;
  right: 140px;
  padding-right: 20px;
  border-right: 1px solid rgb(222, 225, 231);
  &:hover {
    color: #0880DF;
  }
`

const download = (
  <Menu>
    <CodeContainer>
      <QRCode src={iOSQRCode} />
      <CodeSpan style={{ display: 'block', textAlign: 'center', padding: 15 }}>iOS二维码</CodeSpan>
    </CodeContainer>
    <CodeContainer>
      <QRCode src={AndroidQRCode} />
      <CodeSpan style={{ display: 'block', textAlign: 'center', padding: 15 }}>Android二维码</CodeSpan>
    </CodeContainer>
  </Menu>

)

const Download = () => (
  <Dropdown overlay={download}
    trigger={['hover']}
    placement="bottomRight"
  >
    <Item className={styles.item}>
      <Icon type="scan" style={{ fontSize: '18px' }}/> {'App扫码下载'}
    </Item>
  </Dropdown>
)

export default Download;
